<template>
    <div>
        <el-button-group>
			<el-tooltip class="item" effect="dark" :content="hsz ? '正常数据' : '回收站'" placement="top">
                <el-button v-if="hsz_status" :icon="!hsz ? 'el-icon-delete' : 'el-icon-s-grid'" @click="toggleHszList" size="small"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="expand ? '菜单收起' : '菜单展开'" placement="top">
                <el-button v-if="expand_status" :icon="expand ? 'el-icon-top' : 'el-icon-bottom'" size="small" @click="toggleRowExpansion"></el-button>
            </el-tooltip>
			<el-tooltip class="item" effect="dark" :content="search_visible ? '搜索框收起' : '搜索框展开'" placement="top">
				<el-button class="hidden-sm-and-down"  icon="el-icon-search" size="small" @click="searchshow"></el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" :content="'刷新'" placement="top">
            <el-button class="hidden-sm-and-down"  icon="el-icon-refresh" size="small" @click="refesh_list"></el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" :content="'打印'" placement="top">
				<el-button class="hidden-sm-and-down"  icon="el-icon-printer" size="small" @click="printer"></el-button>
			</el-tooltip>
        </el-button-group>
    </div>
</template>

<script>
export default {
    name:'TableTool',
    props: {
        expand_status:{
            type:Boolean,
            default:false,
        },
        expand:{
            type:Boolean,
            default:false,
        },
		hsz_status:{
            type:Boolean,
            default:false,
        },
		hsz:{
            type:Boolean,
            default:false,
        },
        search_visible:{
            type:Boolean,
            default:false
        },
        tableid:{
            type:String,
        }
    },
    methods: {
        searchshow() {
            this.$emit('update:search_visible', !this.search_visible)
        },
		toggleHszList(){
			this.$emit('update:hsz', !this.hsz)
			this.$emit('toggle_list')
		},
        refesh_list() {
            this.$emit('refesh_list')
        },
        toggleRowExpansion(){
            this.$emit('toggle')
        },
        printer(){
			const html = document.querySelector('#'+this.tableid).innerHTML			
			const div = document.createElement('div')
			const printDOMID = 'printDOMElement'
			div.id = printDOMID
			div.innerHTML = html
			const ths = div.querySelectorAll('.el-table__header-wrapper th')
			const rows = div.querySelectorAll('.el-table__body-wrapper table tr');
			
			const ThsTextArry = []
			for (let i = 0, len = ths.length; i < len; i++) {
				if (ths[i].innerText !== '' && ths[i].innerText !== '编号' && ths[i].innerText !== '操作') ThsTextArry.push(ths[i].innerText)
			}
			const ThsHtmlArry = [];
			for (let i = 0, len = rows.length; i < len; i++) {
				const tr = document.createElement('tr');
				const tds = rows[i].querySelectorAll('td');
				for (let j = 0, tdLen = tds.length; j < tdLen; j++) {
					if (j !== 0 && j !== 1 && j !== tdLen - 1) {
						if(tds[j].innerHTML.includes('img')) {
							tr.innerHTML += "<td>" + tds[j].innerHTML + "</td>";
						}else if(tds[j].innerHTML.includes('switch')){
							if(tds[j].innerHTML.includes('is-checked')){
								tr.innerHTML += "<td>正常</td>";
							}else{
								tr.innerHTML += "<td>禁用</td>";
							}
						}else {
							tr.innerHTML += "<td>" + tds[j].innerText + "</td>";
						}
					}
				}
				ThsHtmlArry.push(tr.outerHTML);
			}
			let trStr = ''
			for (let i = 0, len = ThsHtmlArry.length; i < len; i++) {
				trStr += ThsHtmlArry[i]
			}
			
			let newHTML = '<tr>'
			for (let i = 0, len = ThsTextArry.length; i < len; i++) {
				newHTML += '<td style="text-align: center; font-weight: bold">' + ThsTextArry[i] + '</td>'
			}
			newHTML += '</tr>'
			
			let printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>";
			const tabStyle = "<style>table.gridtable {width:100%;font-family: verdana,arial,sans-serif;font-size:11px;color:#606266;border-width: 1px;border-color: #ddd;border-collapse: collapse;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #ddd;background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 15px 0;border-style: solid;border-color: #ddd;background-color: #ffffff;text-align:center;}img{width:50px; height:50px;}</style><body>";
            printStr = printStr +tabStyle + "<table class='gridtable'>"+newHTML+trStr + "</body></html>";
			
            let pwin = window.open("_blank");
            pwin.document.write(printStr);
            pwin.document.close();
            pwin.focus();
            setTimeout(() => {
                pwin.print();
                pwin.close();
            }, 500);
			div.remove()
		}
    },
}
</script>

<style lang="scss" scoped>

</style>